<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('离职人员表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    .select-list li p {
        width: auto !important;
        margin-top: 7px !important;
    }

    .form-header {
        margin: 10px auto !important;

    }

    .table-striped .table > thead:first-child > tr:first-child > th {
        font-weight: normal;
        font-size: 13px;
        border: 1px solid #cccccc;
        border-right: none;
        border-top: 1px solid #cccccc !important;
    }
</style>
<body class="gray-bg">
<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="project-form">
                    <div class="col-sm-12">
                        <div class="select-list">
                            <ul>
                                <li>
                                    <p>单位：</p>
                                    <select name="compId" id="compId" class="form-control">
                                        <option value="">请选择</option>
                                        <option th:each="pro:${userComp}" th:value="${pro.compId}"
                                                th:text="${pro.compName}"></option>
                                    </select>
                                </li>
                                <li>
                                    <p>年份：</p>
                                    <select name="years" id="years" class="form-control">
                                        <option value="">请选择</option>
                                        <option value="2020">2020</option>
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                        <option value="2023">2023</option>
                                        <option value="2024">2024</option>
                                        <option value="2025">2025</option>
                                    </select>
                                </li>
                                <li>
                                    <p>月份：</p>
                                    <select name="months" id="months" class="form-control">
                                        <option value="">请选择</option>
                                        <option value="1">一月</option>
                                        <option value="2">二月</option>
                                        <option value="3">三月</option>
                                        <option value="4">四月</option>
                                        <option value="5">五月</option>
                                        <option value="6">六月</option>
                                        <option value="7">七月</option>
                                        <option value="8">八月</option>
                                        <option value="9">九月</option>
                                        <option value="10">十月</option>
                                        <option value="11">十一月</option>
                                        <option value="12">十二月</option>
                                    </select>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">

                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
                        <i class="fa fa-edit"></i> 修改
                    </a>
                    <a class="btn btn-warning" onclick="exportEmpChange()">
                        <i class="fa fa-download"></i> 导出
                    </a>
                </div>
                <table id="empQuit-table"></table>
                <div class="col-sm-12 sum"></div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var prefix = ctx + "empQuit";
    var value;
    $(function () {
        var empQuit_options = {
            url: prefix + '/list',
            uniqueId: "id",
            id: 'empQuit-table',
            removeUrl: prefix + "/remove",
            updateUrl: prefix + "/edit/{id}",
            modalName: "离职人员",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination:false,
            rowStyle: function (row, index) {
                var style = {};
                style={css:{'color':'#ed5565','font-weight':'700'}};

                if(row.compName=='合计'){
                    return style;
                }else {
                    return '';
                }
            },
            columns: [
                [{
                    checkbox: true,
                    rowspan: 2,
                    valign: "middle",
                    align: "center",
                },
                    {
                        field: 'compName',
                        title: '工程公司名称',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'years',
                        title: '年份',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'months',
                        title: '月份',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'monthTotalQuitNum',
                        title: '本月离职总人数',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'highNum',
                        title: '高层管理',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'middleNum',
                        title: '中层管理',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'basicNum',
                        title: '基层管理',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'workerNum',
                        title: '工人人数',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        field: 'logisticsNum',
                        title: '后勤(不含安保)',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",

                    },
                    {
                        title: '性别结构',
                        rowspan: 1,
                        colspan: 2,
                        align: "center"
                    },
                    {
                        title: '工龄分布',
                        rowspan: 1,
                        colspan: 5,
                        align: "center"
                    },
                    {
                        title: '年龄分布',
                        rowspan: 1,
                        colspan: 4,
                        align: "center"
                    },
                    {
                        title: '学历分布',
                        rowspan: 1,
                        colspan: 4,
                        align: "center"
                    },
                ],
                [

                    {
                        field: 'maleNum',
                        title: '男人数',

                    },
                    {
                        field: 'femaleNum',
                        title: '女人数',

                    },
                    {
                        field: 'oneYearLowerNum',
                        title: '＜1年',

                    },
                    {
                        field: 'oneThreeNum',
                        title: '1年≥~＜3年',

                    },
                    {
                        field: 'threeFiveNum',
                        title: '3年≥~＜5年',

                    },
                    {
                        field: 'fiveTenNum',
                        title: '5年≥~＜10年',

                    },
                    {
                        field: 'tenYearUpperNum',
                        title: '≥10年',

                    },
                    {
                        field: 'twentyThirtyAgeNum',
                        title: '＜30岁',

                    },
                    {
                        field: 'thirtyFortyAgeNum',
                        title: '30岁≥~＜40岁',

                    },
                    {
                        field: 'fortyFiftyAgeNum',
                        title: '40岁≥~＜50岁',

                    },
                    {
                        field: 'fiftyUpperAgeNum',
                        title: '≥50岁',
                    },
                    {
                        field: 'highLowerSchoolNum',
                        title: '高中及以下(含中专)',
                    },
                    {
                        field: 'juniorCollegeSchoolNum',
                        title: '大专人数',
                    },
                    {
                        field: 'undergraduateSchoolNum',
                        title: '本科人数',
                    },
                    {
                        field: 'undergraduateUpperSchoolNum',
                        title: '本科以上',
                    },
                ]
            ]

        }
        $.table.init(empQuit_options);
        //sums();
    })
    // function sums() {
    //     setTimeout(function () {
    //         value = $("#empQuit-table").bootstrapTable('getData');
    //         var highNum = 0;//高层管理
    //         var middleNum = 0;//中层管理
    //         var basicNum = 0;//基层管理
    //         var workerNum = 0;//工人
    //         var logisticsNum = 0;//后勤
    //         var maleNum = 0;//男
    //         var femaleNum = 0;//女
    //         var oneYearLowerNum = 0;//1年以下
    //         var oneThreeNum = 0;//1-3年
    //         var threeFiveNum = 0;//3-5年
    //         var fiveTenNum = 0;//5-10年
    //         var tenYearUpperNum = 0;//10年以上
    //         var twentyLowerAgeNum = 0;//20以下
    //         var twentyThirtyAgeNum = 0;//20-30
    //         var thirtyFortyAgeNum = 0;//30-40
    //         var fortyFiftyAgeNum = 0;//40-50
    //         var fiftyUpperAgeNum = 0;//50以上
    //         var juniorCollegeSchoolNum = 0;//大专
    //         var highLowerSchoolNum = 0;//高中人数
    //         var undergraduateSchoolNum = 0;//本科
    //         var undergraduateUpperSchoolNum = 0;//本科及以上
    //         var monthTotalQuitNum = 0;//离职总人数
    //
    //         if(value.length==0){
    //             highNum = 0;//高层管理
    //             middleNum = 0;//中层管理
    //             basicNum = 0;//基层管理
    //             workerNum = 0;//工人
    //             logisticsNum = 0;//后勤
    //             maleNum = 0;//男
    //             femaleNum = 0;//女
    //             oneYearLowerNum = 0;//1年以下
    //             oneThreeNum = 0;//1-3年
    //             threeFiveNum = 0;//3-5年
    //             fiveTenNum = 0;//5-10年
    //             tenYearUpperNum = 0;//10年以上
    //             twentyLowerAgeNum = 0;//20以下
    //             twentyThirtyAgeNum = 0;//20-30
    //             thirtyFortyAgeNum = 0;//30-40
    //             fortyFiftyAgeNum = 0;//40-50
    //             fiftyUpperAgeNum = 0;//50以上
    //             juniorCollegeSchoolNum = 0;//大专
    //             highLowerSchoolNum = 0;//高中人数
    //             undergraduateSchoolNum = 0;//本科
    //             undergraduateUpperSchoolNum = 0;//本科及以上
    //             monthTotalQuitNum = 0;//离职总人数
    //         }else {
    //             for (var i in value) {
    //
    //                 highNum += value[i].highNum//高层管理
    //                 middleNum += value[i].middleNum;//中层管理
    //                 basicNum += value[i].basicNum;;//基层管理
    //                 workerNum += value[i].workerNum;//工人
    //                 logisticsNum += value[i].logisticsNum;//后勤
    //                 maleNum += value[i].maleNum;//男
    //                 femaleNum += value[i].femaleNum;//女
    //                 oneYearLowerNum += value[i].oneYearLowerNum;//1年以下
    //                 oneThreeNum += value[i].oneThreeNum;//1-3年
    //                 threeFiveNum += value[i].threeFiveNum;//3-5年
    //                 fiveTenNum += value[i].fiveTenNum;//5-10年
    //                 tenYearUpperNum += value[i].tenYearUpperNum;//10年以上
    //                 twentyLowerAgeNum += value[i].twentyLowerAgeNum;//20以下
    //                 twentyThirtyAgeNum += value[i].twentyThirtyAgeNum;//20-30
    //                 thirtyFortyAgeNum += value[i].thirtyFortyAgeNum;//30-40
    //                 fortyFiftyAgeNum += value[i].fortyFiftyAgeNum;//40-50
    //                 fiftyUpperAgeNum += value[i].fiftyUpperAgeNum;//50以上
    //                 juniorCollegeSchoolNum += value[i].juniorCollegeSchoolNum;//大专
    //                 highLowerSchoolNum+= value[i].highLowerSchoolNum;//高中
    //                 undergraduateSchoolNum += value[i].undergraduateSchoolNum;//本科
    //                 undergraduateUpperSchoolNum += value[i].undergraduateUpperSchoolNum;;//本科及以上
    //                 monthTotalQuitNum += value[i].monthTotalQuitNum;;//离职总人数
    //
    //             }
    //         }
    //
    //         var html;
    //         html = '<div class="col-sm-12" style="text-align: center;">' + '<h3 style="display: inline;">合计：</h3>' +
    //             '<div style="display: inline">' +
    //             "本月离职总人数：" + '<sapan style="color: red;">' + monthTotalQuitNum + '</sapan>' + "；" +
    //             "高层管理：" + '<sapan style="color: red;">' + highNum + '</sapan>' + "；" +
    //             "中层管理：" + '<sapan style="color: red;">' + middleNum + '</sapan>' + "；" +
    //             "基层管理：" + '<sapan style="color: red;">' + basicNum + '</sapan>' + "；" +
    //             "工人人数：" + '<sapan style="color: red;">' + workerNum + '</sapan>' + "；" +
    //             "后勤人数：" + '<sapan style="color: red;">' + logisticsNum + '</sapan>' + "；" +
    //             "男人数：" + '<sapan style="color: red;">' + maleNum + '</sapan>' + "；" +
    //             "女人数：" + '<sapan style="color: red;">' + femaleNum + '</sapan>' + "；" +
    //             "1年以下：" + '<sapan style="color: red;">' + oneYearLowerNum + '</sapan>' + "；" +
    //             "1-3年：" + '<sapan style="color: red;">' + oneThreeNum + '</sapan>' + "；" +
    //             "3-5年：" + '<sapan style="color: red;">' + threeFiveNum + '</sapan>' + "；" +
    //             "5-10年：" + '<sapan style="color: red;">' + fiveTenNum + '</sapan>' + "；" +
    //             "10年以上：" + '<sapan style="color: red;">' + tenYearUpperNum + '</sapan>' + "；" +
    //             "20岁以下：" + '<sapan style="color: red;">' + twentyLowerAgeNum + '</sapan>' + "；" +
    //             "20-30岁：" + '<sapan style="color: red;">' + twentyThirtyAgeNum + '</sapan>' + "；" +
    //             "30-40岁：" + '<sapan style="color: red;">' + thirtyFortyAgeNum + '</sapan>' + "；" +
    //             "40-50岁：" + '<sapan style="color: red;">' + fortyFiftyAgeNum + '</sapan>' + "；" +
    //             "50岁以上：" + '<sapan style="color: red;">' + fiftyUpperAgeNum + '</sapan>' + "；" +
    //             "高中及以下：" + '<sapan style="color: red;">' + highLowerSchoolNum + '</sapan>' + "；" +
    //             "大专人数：" + '<sapan style="color: red;">' + juniorCollegeSchoolNum + '</sapan>' + "；" +
    //             "本科人数：" + '<sapan style="color: red;">' + undergraduateSchoolNum + '</sapan>' + "；" +
    //             "本科以上：" + '<sapan style="color: red;">' + undergraduateUpperSchoolNum + '</sapan>' + "；" +
    //             '</div>' + '</div>';
    //         $(".sum").empty();
    //         $(".sum").append(html);
    //     }, 500)
    // }
    function exportEmpChange() {
        $('#empQuit-table').bootstrapTable('hideColumn', 0);
        $("#empQuit-table").tableExport({type: 'excel',
            fileName: '离职人员表',
            exportDataType: "all",
        });
        $('#empQuit-table').bootstrapTable('showColumn', 0);
    }
</script>
</body>
</html>